<template>
  <div style="height: 100vh;overflow:hidden;
    background-image: linear-gradient(135deg,#1352F2,#3C82F5);">
  <el-container style="padding: 30px">
    <el-header>
      <el-row :gutter="20">
       <el-col :span="3">
         <img src="/imgs/login/logo.png" style="height: 50px;width: 100%">
       </el-col>
       <el-col :span="1">
         <img src="/imgs/login/auto.png" style="height: 50px;width: 100%">
       </el-col>
       <el-col :span="1">
         <img src="/imgs/login/verticalLine.png" style="height: 50px;width: 100%">
       </el-col>
       <el-col :span="19">
         <span style="color:#fff; font-weight: bold;font-size: 30px">智慧车辆运营管理系统</span>
       </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-row>
       <el-col :span="16">
         <img src="/imgs/login/bg.png" style="width: 100%;margin-top: 60px">
       </el-col>
       <el-col :span="8">
         <el-card style="margin-top: 80px">
           <h3 style="text-align: center;">用户登录</h3>
           <el-form label-position="top" :model="user" :rules="rules" ref="formRef">
             <el-form-item label="用户名" prop="username">
               <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
             </el-form-item>
             <el-form-item label="密码" prop="password">
               <el-input placeholder="请输入密码" type="password" v-model="user.password"></el-input>
             </el-form-item>
             <el-form-item>
               <el-button type="primary" style="width: 100%" @click="login">登陆</el-button>
             </el-form-item>
           </el-form>
           <div style="text-align: center;color: #666;font-size: 14px;padding: 10px 0">
             (体验账号:tom 密码123456)
           </div>
         </el-card>
       </el-col>
      </el-row>
    </el-main>
  </el-container>
  </div>
</template>

<script setup>
import {ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";

const user=ref({username:'',password:''});

//做了表单项校验,如果不通过依然能提交表单(是一项BUG
//定义formRef必须与el-form的ref属性值一样
//调用formRef.value.validate(valid=>{}),valid返回true和false
const formRef=ref();
const login=()=>{
  formRef.value.validate(valid=>{
    if (valid){
      ElMessage.success('表单验证成功');
    }else {
      ElMessage.error('表单验证失败');
      return;
    }
  })
  console.log(user.value);
  axios.post(BASE_URL+'/v1/user/login',user.value)
      .then((response)=>{
        //2.发请求后 服务器处理完毕会给客户端响应结果,前端需要在回调函数中处理这个响应结果
        //response是响应对象 我们从response的data中得到后端服务器的响应数据
        console.log(response);
        console.log(response.data);//后端返回的JsonResult
        console.log(response.data.data);//JsonResult的data 这里是userVO

        if (response.data.code==2000){
          ElMessage.success('登陆成功!');
          /*localStorage只能存储字符串类型的键值对*/
          localStorage.setItem('user',JSON.stringify(response.data.data));
          //登陆成功后 跳转到HomeView 再重定向到用户列表页
          router.push('/');
        } else {
          ElMessage.error(response.data.msg);
          //登录失败,清空输入框
          user.value={username:'',password:''};
        }
      })
}

//写校验规则rules 还可以自定义校验validator
const rules={
  username: [
    {required:true,message:'请输入用户名',trigger:'blur'},
    {min:2,max:11,message: '长度在2-11之间',trigger: 'blur'}
  ],
  password: [
      {required:true,message:'请输入密码',trigger:'blur'},
      {min:4,max:12,message: '长度在4-12之间',trigger: 'blur'}
  ]
}




</script>


<style scoped>

</style>